<template>
  <div class="login">
    <div class="box">
      <i class="el-icon-close" @click="close_login">
        <el-icon :size="size" :color="color">
          <Close/>
        </el-icon>
      </i>
      <div class="content">
        <div class="nav">
          <span :class="{active: login_method === 'is_pwd'}" @click="change_login_method('is_pwd')">密码登录</span>
          <span :class="{active: login_method === 'is_sms'}" @click="change_login_method('is_sms')">短信登录</span>
        </div>
        <el-form v-if="login_method === 'is_pwd'">
          <el-input
              placeholder="用户名/手机号/邮箱"
              :prefix-icon="User"
              v-model="username"
              clearable>
          </el-input>
          <el-input
              placeholder="密码"
              :prefix-icon="Lock"
              v-model="password"
              clearable
              show-password>

          </el-input>
          <el-button type="primary" @click="mul_login">登录</el-button>
        </el-form>
        <el-form v-if="login_method === 'is_sms'">
          <el-input
              placeholder="手机号"
              :prefix-icon="Iphone"
              v-model="mobile"
              clearable
              @blur="check_mobile">
          </el-input>
          <el-input
              placeholder="验证码"
              :prefix-icon="ChatLineRound"
              v-model="sms"
              clearable>
            <template #append>
              <span class="sms" @click="send_sms">{{ sms_interval }}</span>
            </template>
          </el-input>
          <el-button type="primary" @click="sms_login">登录</el-button>
        </el-form>
        <div class="foot">
          <span @click="go_register">立即注册</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reqMulLogin, reqCheckMobile, reqSmsLogin, reqSendSms} from "../api/user.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {definedUser} from "../store/user.js";
//小图标引入
import {User, Lock, Iphone, ChatLineRound} from '@element-plus/icons-vue'
// 0 得到 $emit
let $emit = defineEmits(['close', 'go'])
// 1 定义页面所需变量
let $store_user = definedUser()
const username = ref('')
const password = ref('')
const mobile = ref('')
const sms = ref('')
const login_method = ref('is_pwd')
const sms_interval = ref('获取验证码')
const is_send = ref('false')
// 2 绑定方法  关闭登录模态框
const close_login = () => {
  $emit('close')
}

// 去注册
const go_register = () => {
  $emit('go')
}

// 登录方式发生变化
const change_login_method = (method) => {
  login_method.value = method;
}

// 异步校验手机端口
const check_mobile = async () => {
  if (!mobile.value) return;
  if (!mobile.value.match(/^1[3-9][0-9]{9}$/)) {
    ElMessage({
      type: 'error',
      message: '手机号有误',
      duration: 1000,
      onClose: () => {
        mobile.value = '';
      }
    })
    return false;
  }
  // 发送请求，校验手机号是否存在，如果存在，设置 is_send.value = true；表示能发短信，能点击发送短信按钮
  // 如果手机号不存在，就不能点击发送短信按钮
  let res = await reqCheckMobile(mobile.value)
  if (res.is_exisit) {
    is_send.value = true
  } else {
    ElMessage({
      type: 'error',
      message: '未注册，请先去注册',
      duration: 1000,
      onClose: () => {
        mobile.value = '';
        go_register()
      }
    })
  }

}

// 异步发送短信
const send_sms = async () => {
  // 定时器
  if (!is_send.value) return;  // is_send 是 false,就不能发送短信
  is_send.value = false;    // 防止用户点击两次，发了两个短信
  let sms_interval_time = 60;
  sms_interval.value = "发送中...";
  let timer = setInterval(() => {
    if (sms_interval_time <= 1) {
      clearInterval(timer);
      sms_interval.value = "获取验证码";
      is_send.value = true; // 重新回复点击发送功能的条件
    } else {
      sms_interval_time -= 1;
      sms_interval.value = `${sms_interval_time}秒后再发`;
    }
  }, 1000);

  // 发送验证码
  await reqSendSms(mobile.value)
}


// 多方式登录
async function mul_login() {
  if (username.value && password.value) {
    let res = await reqMulLogin(username.value, password.value)

    // 正常成功，是100，来到这里 res:{"code"，"msg"，"username"，"token"，"icon"}
    // 1 把用户名和 token 和 icon 保存到本地 {cookie} -->pinia中
    // $cookie.set('token', res.token, '7d')
    // $cookie.set('username', res.username, '7d')
    // $cookie.set('icon', res.icon, '7d')

    $store_user.set_user({username: res.username, icon: res.icon, token: res.token})


    // 2 关闭模态框
    $emit('close')
  } else {
    ElMessage({
      type: 'error',
      message: '用户名或密码不能为空'
    })
  }

}


// 短信登录
async function sms_login() {
  if (mobile.value && sms.value) {
    let res = await reqSmsLogin(mobile.value, sms.value)

    $store_user.set_user({username: res.username, icon: res.icon, token: res.token})


    // 2 关闭模态框
    $emit('close')
  } else {
    ElMessage({
      type: 'error',
      message: '手机号或验证码不能为空'
    })
  }

}

</script>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
}

.box {
  width: 400px;
  height: 420px;
  background-color: white;
  border-radius: 10px;
  position: relative;
  top: calc(50vh - 210px);
  left: calc(50vw - 200px);
}

.el-icon-close {
  position: absolute;
  font-weight: bold;
  font-size: 20px;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.el-icon-close:hover {
  color: darkred;
}

.content {
  position: absolute;
  top: 40px;
  width: 280px;
  left: 60px;
}

.nav {
  font-size: 20px;
  height: 38px;
  border-bottom: 2px solid darkgrey;
}

.nav > span {
  margin: 0 20px 0 35px;
  color: darkgrey;
  user-select: none;
  cursor: pointer;
  padding-bottom: 10px;
  border-bottom: 2px solid darkgrey;
}

.nav > span.active {
  color: black;
  border-bottom: 3px solid black;
  padding-bottom: 9px;
}

.el-input, .el-button {
  margin-top: 40px;
}

.el-button {
  width: 100%;
  font-size: 18px;
}

.foot > span {
  float: right;
  margin-top: 20px;
  color: orange;
  cursor: pointer;
}

.sms {
  color: orange;
  cursor: pointer;
  display: inline-block;
  width: 70px;
  text-align: center;
  user-select: none;
}
</style>
